<!DOCTYPE html>
<html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.3.0/video.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.3.0/video-js.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.3.0/video.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
</head>

<body>

<div class="fixed-grid">

    <div class="grid">


        
        <div class="cell">
            <h5>录像机:34020000001110000002 通道34020000001320000001 流标记000000C9</h5>
            <video id="cam_1" class="video-js vjs-big-play-centered vjs-theme-sea" controls muted width="600"
                   height="400"></video>
        </div>
        
        <div class="cell">
            <h5>录像机:34020000001110000002 通道34020000001320000002 流标记000000CA</h5>
            <video id="cam_2" class="video-js vjs-big-play-centered vjs-theme-sea" controls muted width="600"
                   height="400"></video>
        </div>
        
        <div class="cell">
            <h5>录像机:34020000001110000002 通道34020000001320000003 流标记000000CB</h5>
            <video id="cam_3" class="video-js vjs-big-play-centered vjs-theme-sea" controls muted width="600"
                   height="400"></video>
        </div>
        
        <div class="cell">
            <h5>录像机:34020000001110000002 通道34020000001320000004 流标记000000CC</h5>
            <video id="cam_4" class="video-js vjs-big-play-centered vjs-theme-sea" controls muted width="600"
                   height="400"></video>
        </div>
        
        <div class="cell">
            <h5>录像机:34020000001110000002 通道34020000001320000005 流标记000000CD</h5>
            <video id="cam_5" class="video-js vjs-big-play-centered vjs-theme-sea" controls muted width="600"
                   height="400"></video>
        </div>
        
        <div class="cell">
            <h5>录像机:34020000001110000002 通道34020000001320000006 流标记000000CE</h5>
            <video id="cam_6" class="video-js vjs-big-play-centered vjs-theme-sea" controls muted width="600"
                   height="400"></video>
        </div>
        
        <div class="cell">
            <h5>录像机:34020000001110000002 通道34020000001320000007 流标记000000CF</h5>
            <video id="cam_7" class="video-js vjs-big-play-centered vjs-theme-sea" controls muted width="600"
                   height="400"></video>
        </div>
        
        <div class="cell">
            <h5>录像机:34020000001110000002 通道34020000001320000008 流标记000000D0</h5>
            <video id="cam_8" class="video-js vjs-big-play-centered vjs-theme-sea" controls muted width="600"
                   height="400"></video>
        </div>
        
        <div class="cell">
            <h5>录像机:34020000001180000001 通道34020000001320000001 流标记00000065</h5>
            <video id="cam_9" class="video-js vjs-big-play-centered vjs-theme-sea" controls muted width="600"
                   height="400"></video>
        </div>
        
        <div class="cell">
            <h5>录像机:34020000001180000001 通道34020000001320000002 流标记00000066</h5>
            <video id="cam_10" class="video-js vjs-big-play-centered vjs-theme-sea" controls muted width="600"
                   height="400"></video>
        </div>
        
        <div class="cell">
            <h5>录像机:34020000001180000003 通道34020000001320000001 流标记0000012D</h5>
            <video id="cam_11" class="video-js vjs-big-play-centered vjs-theme-sea" controls muted width="600"
                   height="400"></video>
        </div>
        
        <div class="cell">
            <h5>录像机:34020000001180000003 通道34020000001320000002 流标记0000012E</h5>
            <video id="cam_12" class="video-js vjs-big-play-centered vjs-theme-sea" controls muted width="600"
                   height="400"></video>
        </div>
        
        <div class="cell">
            <h5>录像机:34020000001180000003 通道34020000001320000003 流标记0000012F</h5>
            <video id="cam_13" class="video-js vjs-big-play-centered vjs-theme-sea" controls muted width="600"
                   height="400"></video>
        </div>
        
    </div>
</div>

<script>

    let data={'li': [{'id': 'cam_1', 'title': '录像机:34020000001110000002 通道34020000001320000001 流标记000000C9', 'ssrc': '000000C9'}, {'id': 'cam_2', 'title': '录像机:34020000001110000002 通道34020000001320000002 流标记000000CA', 'ssrc': '000000CA'}, {'id': 'cam_3', 'title': '录像机:34020000001110000002 通道34020000001320000003 流标记000000CB', 'ssrc': '000000CB'}, {'id': 'cam_4', 'title': '录像机:34020000001110000002 通道34020000001320000004 流标记000000CC', 'ssrc': '000000CC'}, {'id': 'cam_5', 'title': '录像机:34020000001110000002 通道34020000001320000005 流标记000000CD', 'ssrc': '000000CD'}, {'id': 'cam_6', 'title': '录像机:34020000001110000002 通道34020000001320000006 流标记000000CE', 'ssrc': '000000CE'}, {'id': 'cam_7', 'title': '录像机:34020000001110000002 通道34020000001320000007 流标记000000CF', 'ssrc': '000000CF'}, {'id': 'cam_8', 'title': '录像机:34020000001110000002 通道34020000001320000008 流标记000000D0', 'ssrc': '000000D0'}, {'id': 'cam_9', 'title': '录像机:34020000001180000001 通道34020000001320000001 流标记00000065', 'ssrc': '00000065'}, {'id': 'cam_10', 'title': '录像机:34020000001180000001 通道34020000001320000002 流标记00000066', 'ssrc': '00000066'}, {'id': 'cam_11', 'title': '录像机:34020000001180000003 通道34020000001320000001 流标记0000012D', 'ssrc': '0000012D'}, {'id': 'cam_12', 'title': '录像机:34020000001180000003 通道34020000001320000002 流标记0000012E', 'ssrc': '0000012E'}, {'id': 'cam_13', 'title': '录像机:34020000001180000003 通道34020000001320000003 流标记0000012F', 'ssrc': '0000012F'}], 'host': 'http://39.106.152.15/deploy/static/gb'}
    function run(id, ssrc) {

           url = `${data['host']}/${ssrc}/live/index.m3u8`
           console.log(id,url)

           var player = videojs(id);
           player.src({
                  src: url,
                  type: 'application/x-mpegURL',
           })
           player.autoplay('muted');
    }
    for (let v of data["li"] ){
        run(v.id,v.ssrc)
    }


</script>

</body>

</html>